/**
 * Index main layout animation mixins
 */

@mixin animation($val) {
  animation: $val;
  -webkit-animation: $val;
  -moz-animation: $val;
  -o-animation: $val;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@mixin animationRev($val) {
  @include animation($val);
  animation-direction: reverse;
  -o-animation-direction: reverse;
  -moz-animation-direction: reverse;
  -webkit-animation-direction: reverse;
}

/**
 * css animation for layout
 * Using transform: translate instead of left and top for better performance
 */
@mixin movingTransform($x, $y) {
  transform: translate($x, $y);
  -ms-transform: translate($x, $y); /* IE 9 */
  -moz-transform: translate($x, $y); /* Firefox */
  -webkit-transform: translate($x, $y); /* Safari and Chrome */
  -o-transform: translate($x, $y); /* Opera */
}

@mixin movingAndScalingTransform($sizeP, $x, $y) {
  transform: translate($x, $y) scale($sizeP);
  -ms-transform: translate($x, $y) scale($sizeP); /* IE 9 */
  -moz-transform: translate($x, $y) scale($sizeP); /* Firefox */
  -webkit-transform: translate($x, $y) scale($sizeP); /* Safari and Chrome */
  -o-transform: translate($x, $y) scale($sizeP); /* Opera */
  transform-origin: left top 0;
  -ms-transform-origin: left top 0;
  -moz-transform-origin: left top 0;
  -webkit-transform-origin: left top 0;
  -o-transform-origin: left top 0;
}

@mixin movingCfg($fromX, $fromY, $toX, $toY) {
  0% {
    @include movingTransform($fromX, $fromY);
  }
  100% {
    @include movingTransform($toX, $toY);
  }
}

@mixin movingKeyframes($name, $fromX, $fromY, $toX, $toY) {
  @keyframes #{$name} {
    @include movingCfg($fromX, $fromY, $toX, $toY)
  }
  /* IE 9 */
  @-ms-keyframes #{$name} {
    @include movingCfg($fromX, $fromY, $toX, $toY)
  }
  /* Firefox */
  @-moz-keyframes #{$name} {
    @include movingCfg($fromX, $fromY, $toX, $toY)
  }
  /* Safari and Chrome */
  @-webkit-keyframes #{$name} {
    @include movingCfg($fromX, $fromY, $toX, $toY)
  }
  /* Opera */
  @-o-keyframes #{$name} {
    @include movingCfg($fromX, $fromY, $toX, $toY)
  }
}